<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        document.querySelector(".box").onclick = function(){
            this.style.transition = "all 1s";
            this.style.left = "500px";
            // setTimeout(() => {
            //     console.log("动画结束了");
            // }, 1000);
            this.addEventListener("transitionend",function(){
                console.log("动画结束了");
            })
        }

        // git 基本操作
        // git add .     git commit -m "注释"
        // git checkout . git reset .  git reset --hard commitID
        // git status
        // git diff    git diff --cathed
        // git log  
        // git log --oneline

        // git push  git pull


        // 分支操作
        // git branch 分支名
        // git branch
        // 合并分支 git merge
        // 删除分支 git branch -d(-D) 分支名
        // 切换分支  git checkout 分支名



        // VUE 全家桶  
        // vue  vue-router  vuex
    </script>
</body>
</html>